<template>
  <div class="add-form">
    <div class="nb-tittle">{{ title }}</div>
    <div v-if="editId" class="step" style="margin-left: -10px">
      <el-steps :active="active" finish-status="finish" process-status="wait" align-center>
        <el-step title="提交">
          <template slot="description">
            <div>{{ data.cr_admin.name }}</div>
            <div>{{ data.create_date }}</div>
          </template>
        </el-step>
        <el-step title="审核">
          <template slot="description">
            <div>赵丹</div>
            <div>{{ data.check_date }}</div>
          </template>
        </el-step>
        <el-step title="审批">
          <template slot="description">
            <div>潘海峰</div>
            <div>{{ data.approve_date }}</div>
          </template>
        </el-step>
        <el-step title="完成">
          <template slot="description">
            <div>沈君</div>
            <div>{{ data.finish_date }}</div>
          </template>
        </el-step>
      </el-steps>
    </div>
    <el-form ref="form" :model="data" inline label-width="110px" hide-required-asterisk class="hx-form" :rules="rules">
      <el-row class="pay-form">
        <el-col :span="7">
          <el-form-item v-if="!editId" label="合同编号：" prop="contract_id">
            <v-select v-model="data.contract_id" action="contractList" :query="{ type:2, status: 1 }" style="width: 160px" @change="getContract" />
          </el-form-item>
          <el-form-item v-if="editId" label="合同编号：" prop="contract_id">
            <el-input v-model="data.contract.code" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="开户银行：" prop="bank">
            <el-input v-model="data.bank" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="pay-form">
        <el-col :span="7">
          <el-form-item label="收款账号：" prop="payee_account">
            <el-input v-model="data.payee_account" />
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="收款单位：" prop="payee_company">
            <el-input v-model="data.payee_company" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="editId" class="pay-form">
        <el-col :span="7">
          <el-form-item label="申请人：">
            <el-input v-model="data.cr_admin.name" readonly />
          </el-form-item>
        </el-col>
        <el-col v-if="data.project" :span="7">
          <el-form-item label="项目名称：">
            <el-input v-model="data.project.name" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="pay-form">
        <el-form-item label="付款金额：">
          <el-input v-model="sum" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="付款说明：">
            <el-input v-model="data.content" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item v-if="editId" label="上传附件：">
            <Adjunct table_name="pay" :pk="editId" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item style="margin:40px 20px 0" class="nb-form-button">
        <el-form-item style="margin:40px 20px 0" class="nb-form-button">
          <el-button v-if="data.status === 1 && isExamine" type="success" @click="changeStatus(2)">审核</el-button>
          <el-button v-if="data.status === 2 && isAllow" type="success" @click="changeStatus(3)">审批</el-button>
          <el-button v-if="data.status === 3 && isFinish" type="success" @click="changeStatus(4)">确认付款</el-button>
          <el-button type="primary" @click="submitForm('form')">提交</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import API from '@/api/pay/pay'
import CONTRACTAPI from '@/api/contract/contract'
import VSelect from '@/components/select'
import Adjunct from '@/components/Upload/Adjunct'
export default {
  inject: ['goUrl', 'isEdit', 'add', 'update', 'setStorage', 'clearStorage', 'getStorage', 'super', 'examine', 'allow', 'finish'],
  components: { VSelect, Adjunct },
  data() {
    return {
      data: {
        contract: {},
        project: {
          name: ''
        },
        cr_admin: {
          name: ''
        }
      },
      title: '',
      editId: '',
      isSuper: false,
      isExamine: false,
      isAllow: false,
      isFinish: false,
      active: null,
      sum: null,
      rules: {
        contract_id: { required: true, message: '请输入编号', trigger: 'change' },
        bank: { required: true, message: '请输入开户银行', trigger: 'change' },
        payee_account: { required: true, message: '请输入收款账号', trigger: 'change' },
        payee_company: { required: true, message: '请输入收款单位', trigger: 'change' }
      }
    }
  },
  created() {
    const edit = this.isEdit()
    this.isSuper = this.super()
    this.isExamine = this.examine()
    this.isAllow = this.allow()
    this.isFinish = this.finish()
    if (edit) {
      this.title = '付款申请详情'
      this.editId = edit
      this.info()
    } else {
      if (this.getStorage('pay')) {
        this.data = this.getStorage('pay')
      }
      this.title = '新增付款申请'
    }
  },
  mounted() {
    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
  },
  methods: {
    info() {
      API.detail(this.editId).then(res => {
        this.data = res.data
        this.sum = res.data.contract.actual_sum
        this.active = res.data.status
      })
    },
    beforeunloadHandler(e) {
      this.clearStorage('pay')
    },
    cancel() {
      if (!this.editId) {
        this.setStorage('pay', this.data)
      }
      this.goUrl('/pay')
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.editId) {
            this.update(API, this.data, '更新成功')
          } else {
            delete this.data.cr_admin
            delete this.data.project
            console.log(this.data)
            // this.delObjKeys(this.data, ['cr_admin', 'project'])
            this.add(API, this.data, '新增成功', '/pay/edit/')
            this.clearStorage('pay')
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    changeStatus(status) {
      const id = this.editId
      API.status({ id, status }).then(res => {
        if (res.data.error_code !== 1) {
          this.$message.error(res.data.message)
        } else {
          this.$message.success('确认付款')
          this.goUrl('/pay')
        }
      })
    },
    getContract() {
      CONTRACTAPI.detail(this.data.contract_id).then(res => {
        this.sum = res.data.actual_sum
      })
    }
  }
}
</script>

<style scoped>
.el-textarea{
  width: 288px;
}

</style>
<style>
.pay-form .el-form-item__content{
  width: calc(100% - 110px);
}
</style>
